import { Component } from 'react'
import { RouteComponentProps } from 'react-router'
import { Form, Input, Button } from 'antd'
import { RuleObject } from 'antd/lib/form'
import { loginAction } from 'src/redux/actions/UserActions'
import { connect } from 'react-redux'
import { message } from 'antd'
// Import Scss
import 'src/assets/scss/pages/login.style.scss'
/** 依赖 ------------------------------------------- */
interface LoginProps {
    toLogin: (params: any) => any
}
interface LoginRules {
    [Key: string]: RuleObject[]
}
/** types ------------------------------------------- */

class Login extends Component<RouteComponentProps & LoginProps> {
    state = {
        smsSrc: '',
        isLoading: false
    }

    componentDidMount() {
        this.getSmsImage()
    }
    onFinish = async (fileds: any) => {
        this.setState({ isLoading: true })
        const params = {
            username: fileds.username,
            password: fileds.password,
            verify_code: fileds.sms,
        }
        const result = await this.props.toLogin(params)
        if (result.status === 200) {
            return message.success('登录成功')
        }
        // 刷新验证码
        this.getSmsImage()
        this.setState({ isLoading: false })
        return message.warning(result.message || '发生错误')
    }
    /** 获取图片验证码地址 */
    getSmsImage() {
        // 生成 uuid
        const imgSrc = 'https://via.placeholder.com/300'
        this.setState({ smsSrc: imgSrc })
    }

    render() {
        // 初始化表单校验规则
        const rules: LoginRules = {
            username: [{ required: true, message: '请输入用户名' }],
            password: [{ required: true, message: '请输入密码' }],
            sms: [{ required: true, message: '请输入验证码' }]
        }

        return (
            <div className="login-page" i-class="relative">
                <div className="login-form-wrap" i-class="absolute">
                    <h2 i-class="mb-20 fz-32">登录</h2>
                    <Form className="login-form" size="large" onFinish={this.onFinish}>
                        <Form.Item name="username" rules={rules.username}>
                            <Input placeholder="请输入用户名" />
                        </Form.Item>
                        <Form.Item name="password" rules={rules.password}>
                            <Input type="password" placeholder="请输入密码" />
                        </Form.Item>
                        <Form.Item name="sms" rules={rules.sms}>
                            <div i-class="flex">
                                <Input placeholder="请输入验证码" />
                                <img className="image-sms" i-class="ml-8 overflow-hidden pointer"
                                    alt="图片验证码" src={this.state.smsSrc} onClick={this.getSmsImage.bind(this)} />
                            </div>
                        </Form.Item>
                        <Button i-class="mt-30" type="primary"
                            block htmlType="submit" loading={this.state.isLoading}>
                            登录
                        </Button>
                    </Form>
                </div>
            </div>
        )
    }
}

export default connect(null, {
    toLogin: loginAction
})(Login)
